/**
 * @desc 菜单详情组件
 */
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import {Form, Button, Tag} from "antd";
import PropTypes from "prop-types";
import { connect } from "react-redux";
const Item = Form.Item;

class MenuDetails extends Component {

    render() {
        const { handleCancel } = this.props;
        const { menuName, menuUrl, menuLevel, menuIcon, status, menuAreaCode } = this.props.detailsData;
        return (
            <Form
                labelCol={{span: 6}}
                wrapperCol={{span: 16}}
            >
                <Item name="menuName" label="菜单名称">
                    <p className={'p-details-item'}>{menuName}</p>
                </Item>
                {/*<Item name="menuAreaCode" label="菜单使用域" >*/}
                {/*    <p className={'p-details-item'}>{menuAreaCode}</p>*/}
                {/*</Item>*/}
                <Item name="menuUrl" label="路由名称">
                    <p className={'p-details-item'}>{menuUrl}</p>
                </Item>
                <Item name="menuLevel" label="菜单等级">
                    <p className={'p-details-item'}>
                        {menuLevel === 1 && <Tag color="green">一级菜单</Tag>}
                        {menuLevel === 2 && <Tag color="red">二级菜单</Tag>}
                        {menuLevel === 3 && <Tag color="red">三级菜单</Tag>}
                    </p>
                </Item>
                <Item name="menuIcon" label="菜单图标" >
                    <p className={'p-details-item'}>{menuIcon && <span className={`iconfont ${menuIcon}`}/>}</p>
                </Item>
                <Item name="status" label="菜单状态" >
                    <p className={'p-details-item'}>
                        {status === 'Y' && <Tag color="green">启用</Tag>}
                        {status === 'N' && <Tag color="red">停用</Tag>}
                    </p>
                </Item>
                <div className="p-text-align">
                    <Button key="back" onClick={handleCancel}>
                        取 消
                    </Button>
                </div>
            </Form>
        );
    }
}
MenuDetails.propTypes = {
    detailsData: PropTypes.object,
    handleCancel: PropTypes.func
};
MenuDetails.defaultProps = {};
const mapStateToProps = state => {
    return {};
};
const mapDispatchToProps = dispatch => {
    return {};
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(MenuDetails));
